import { useState } from 'react'
import { Tag, Typography, Divider } from 'antd'
const { CheckableTag } = Tag
const { Text } = Typography
interface PropsType {
	onSelect?: () => void
	children?: React.ReactNode
}
const FilterTag: React.FC<PropsType> = (props) => {
	const [checked, setChecked] = useState(false)
	const handleChange = (checked) => {
		setChecked(checked)
	}

	return <CheckableTag {...props} checked={checked} onChange={handleChange} />
}

export default function CheckableTagDemo() {
	const tags = ['1星', '2星', '3星', '4星', '5星']
	return (
		<div style={{ backgroundColor: '#fff', padding: 10 }}>
			<Text>用户评价：</Text>
			{tags.map((tag) => (
				<span key={tag}>
					<FilterTag>{tag}</FilterTag>
					<Divider type="vertical" />
				</span>
			))}
		</div>
	)
}
